<!-- 编写博客组件 -->
<template>
	<div class="blog-body-box">
		<div class="editmd">
			<div class="article-title-box">
				<el-input v-model="titleinput" placeholder="请输入文章标题（5~100个字）" class="titleinput article-title-input"
					size="medium" minlength="5" maxlength="100" show-word-limit>
				</el-input>
				<el-button type="primary" round class="push-editmd publish-articles-but" size="small"
					@click="postArticle(1)">发布文章</el-button>
				<el-button type="primary" round class="push-editmd publish-articles-but" size="small"
					@click="postArticle(0)">存为草稿</el-button>
				<el-button type="primary" round class="push-editmd call-back-home-btn" size="small" @click="callBack">返回
				</el-button>
			</div>
			<div class="md-box">
				<mavon-editor v-model="editorContent" :ishljs="true" codeStyle="atom-one-dark"
					toolbarsBackground="ghostwhite" ref=md @imgAdd="imgAdd" @imgDel="imgDel"
					:external-link="externalLink"></mavon-editor>
			</div>
		</div>
	</div>

</template>

<script>
	import jwtDecode from 'jwt-decode';
	import {
		mavonEditor
	} from 'mavon-editor'
	import 'mavon-editor/dist/css/index.css';
	import {
		devArticleManagementUrl
	} from '@/api/apiconst'

	export default {
		name: "ReleaseBlog",
		data() {
			return {
				titleinput: "",
				editorContent: "",
				externalLink: {
					markdown_css: false,
					hljs_js: () => '/md/highlightjs/highlight.min.js',
					hljs_css: (css) => '/md/highlightjs/styles/' + css + '.min.css',
					hljs_lang: (lang) => '/md/highlightjs/languages/' + lang + '.min.js',
					katex_css: () => '/md/katex/katex.min.css',
					katex_js: () => '/md/katex/katex.min.js',
				}

			}
		},
		components: {
			mavonEditor
		},

		mounted() {
			window.addEventListener("beforeunload", this.beforeUnloadHandler, false)
		},
		destroyed() {
			window.removeEventListener("beforeunload", this.beforeUnloadHandler, false)
		},

		methods: {
			// 此处返回任意字符串，不返回null即可，不能修改默认提示内容
			beforeUnloadHandler(e) {
				e.returnValue = "离开此页面？"
			},
			// 图片上传
			imgAdd(pos, $file) {
			
				let formdata = new FormData()
				formdata.append('file', $file)
				formdata.append('remarks', "博客文件")
				this.$axios({
					url: '/article/fileUpload',
					baseURL: devArticleManagementUrl,
					method: 'post',
					data: formdata,
					headers: {
						'Content-Type': 'multipart/form-data;charset=UTF-8',
					},
				}).then((respon) => {
					// 第二步.将返回的url替换到文本原位置![...](0) -> ![...](url)
					this.$refs.md.$img2Url(pos, respon.data.data);
				})
			},
			// 图片删除
			imgDel(pos) {
				delete this.imgFile[pos]
			},
			//返回主页
			callBack() {
				//跳转到主界面
				this.$router.push({
					path: "/blogList"
				});
			},

			//发布文章
			postArticle(status) {
				if (this.titleinput == '' || this.titleinput == null) {
					this.$message.error('标题不能为空');
					return;
				}
				if (this.editorContent == '' || this.editorContent == null) {
					this.$message.error('内容不能为空');
					return;
				}

				this.$axios({
					method: 'POST',
					url: '/article/add',
					baseURL: devArticleManagementUrl,
					data: {
						title: this.titleinput,
						content: this.editorContent,
						status: status,
						userInformationId: {
							ID: jwtDecode(localStorage.getItem("token")).ID,
							avatarLink:jwtDecode(localStorage.getItem("token")).avatarLink,
							nickName:jwtDecode(localStorage.getItem("token")).nickName,
						}
					}
				}).then(
					response => {
						if (response.data.code == 200) {
							this.$message.success('发布成功')
							setTimeout(() => {
								//跳转到博客界面
								this.$router.push({
									path: "/blogList"
								});
							}, 2000);

						}
					},
					error => {
						this.$message.error('诶呀~服务器走丢了');
					}
				);





			}

		}
	}
</script>

<style>
	/* 引入markdown本地样式 */
	@import '/public/md/markdown/github-markdown.min.css';

	.blog-body-box .editmd .article-title-box .publish-articles-but {

		border: 0px solid;
	}

	.blog-body-box .editmd .article-title-box .call-back-home-btn {

		border: 0px solid;
	}

	.blog-body-box .article-title-input {
		width: 80%;

	}
</style>
